<template>
	<s-layout  navbar="custom1" >
		<view class="main">
			<!-- <scroll-view  :scroll-x="true" style="width:100vw"> -->
				<view class="mapPos">
					<mapdemo  :list="state.list"></mapdemo>
				</view>
			<!-- </scroll-view> -->
			<su-fixed bottom :isInset="false">
				<view class="box-bottom">
					<view class="ss-flex ss-m-b-26 justify-between ss-p-x-30">
						<view class="">中国
						<text v-for="(item,index) in state.cityName" :key="index">/{{item}}</text>
						</view>
						<view style="color:#9E9E9E" v-if="state.level!=0" @tap="back">返回上级</view>
					</view>
					<scroll-view class="scroll-view" :scroll-y="true" style="">
						<view class="scroll-box" >
							<view @tap="nextArea(item)" v-for="(item,index) in state.allList[state.level]" :key="item.id" class="scroll-item ss-flex justify-between">
								<view>{{item.name}}<span v-if="state.level!=2">（0/{{item.children.length}}）</span></view>
								<view @tap.prevent="go(item)">去签约</view>
								<!-- <view style="text-decoration:line-through;color:#F8F8F8">已满</view> -->
							</view>
						</view>
					</scroll-view>
				</view>
				
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	import sheep from '@/sheep';
	import mapdemo from './echarts.vue' 
	const state=reactive({
		list:[],
		areaList:[],
		level:0,
		allList:[[],[],[]],
		cityName:[],
	})
	function go(item){
		console.log(item)
		var arr=[4,3,2]
		
		sheep.$router.go('/pages/commission/giveaway/proxy',{type:arr[state.level]})//街道服务商2 区县3 城市4
	}
	
	// 查看下级
	function nextArea(item){
		if(state.level==0){//选择城市
			state.list=[item.id+'0000']
		}
		state.cityName.push(item.name)
		
		state.level++
		if(item.children?.length>0){
			state.allList[state.level]=item.children
		}else{
			state.allList[state.level]=[]
		}
		console.log(state.allList,state.level)
	}
	function back(){
		state.cityName.pop()
		state.allList[state.level]=[]
		state.level--
	}
	
	
	onLoad(async ()=>{
		const response = await sheep.$api.data.area()
		console.log('response',response)
		state.allList[state.level]=response.data
	})
</script>
<style lang="scss" scoped>
	view{
		box-sizing:border-box
	}
	.main{
		height:100vh;
		background:#363050;
		position:relative;
		.mapPos{
			position:absolute;
			left:-100rpx;
			top:500rpx;
			transform: scale(1.5);
			
		}
	}
.box-bottom{
		width:100vw;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding:25rpx 16rpx 100rpx 16rpx;
		background:#435B8B;
		font-size: 30rpx;
		color:#fff;
		z-index:999;
		.scroll-view{
			height:400rpx;
			border-radius: 30rpx;
			background:#2D3B56;
		}
		.scroll-box{
			padding:20rpx 41rpx;
			.scroll-item{
				padding:12rpx 0;
				border-bottom:2rpx solid #D8D8D8;
				margin-bottom:10rpx;
			}
		}
		
	}
</style>
                        
